import Taro, { Current } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, Image, RichText } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import CTopbar from '@/components/CTopBar/index'
import CImage from '@/components/CImage/index'
import { course_detail_api, get_comment_list_api, toggle_lick_api } from './service'
import './index.scss'
import like from '@/assets/like.png'
import dislike from '@/assets/dislike.png'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
/**
 * 线下课程详情
 */
interface IDetailData {
  address: string
  endTime: string
  id: number
  isCollect: boolean
  limitNumber: number
  offlineImg: string
  offlineRemarks: string
  offlineTitle: string
  price: number
  registrationEndTime: string
  registrationNumber: number
  registrationTime: string
  registrationType: number
  startTime: string
}

type I = {
  system: string
  value: string
  current: number
  id: number
  isLike: boolean
  detailData: IDetailData
  comment: any
  pageNum: number
  pageSize: number
  total: number
  isMore: boolean
}
interface OffLineCourseDetails {
  state: I
}
class OffLineCourseDetails extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      system: '',
      value: '',
      current: 0,
      id: 0,
      isLike: false,
      detailData: {
        address: '小区门口',
        endTime: '2021-01-20 04:00:00',
        id: 5,
        isCollect: false,
        limitNumber: 10,
        offlineImg: 'http://pipe-oss.ydche.com/image/832ea7f60da745c5a6650b2db3fa5d14微信图片_20200928145628.jpg',
        offlineRemarks: '<p>哈哈哈</p>',
        offlineTitle: '奔跑吧家人',
        price: 20,
        registrationEndTime: '2021-01-06 04:00:00',
        registrationNumber: 0,
        registrationTime: '2021-01-02 04:00:00',
        registrationType: 1,
        startTime: '2021-01-12 04:00:00',
      },
      comment: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      isMore: false,
    }
  }
  componentWillMount() {
    const { id } = Current.router?.params
    const system = Taro.getStorageSync('system')
    this.setState(
      {
        id: Number(id),
        system,
      },
      () => {
        this.get_course_detail()
        this.get_comment_list()
      },
    )
  }
  // 获取详细信息
  get_course_detail() {
    const { id } = this.state
    course_detail_api(id).then(({ result, data }) => {
      this.setState({
        detailData: data,
        isLike: data.isCollect,
      })
    })
  }
  // 获取评论列表
  get_comment_list() {
    const { id, pageSize, pageNum } = this.state
    const params = {
      id,
      pageSize,
      pageNum,
    }
    get_comment_list_api(params).then(({ result, data }) => {
      if (pageSize === data.length) {
        this.setState({
          isMore: true,
        })
      }
      this.setState({
        comment: data,
      })
    })
  }

  // 切换tags
  handleClick(value) {
    this.setState({
      current: value,
    })
  }

  // 切换喜欢
  toggleLick() {
    const id = this.state.id
    // 线下  喜欢
    toggle_lick_api(id, 4).then(({ result, data }) => {
      if (result > 0) {
        this.get_course_detail()
      }
    })
  }

  // 去订阅
  //  是否已经购买了   是否已经开始报名了
  gotoPay(price, isStart) {
    console.log(isStart)

    const { system, detailData, id } = this.state
    // type=2 课程
    // type=1 测评
    if (!detailData.id) {
      Taro.showToast({
        title: '请稍后再试！',
        icon: 'none',
        duration: 2000,
      })
      return
    }
    if (isStart === 1) {
      if (detailData.price) {
        Taro.navigateTo({
          // 4====线下课程
          url: '/pages/Pay/index?id=' + id + '&type=4',
        })
      } else {
      }
    } else if (isStart === 0) {
      Taro.showToast({
        title: '活动还未开始，敬请期待',
        icon: 'none',
        duration: 2000,
      })
      return
    } else if (isStart === 2) {
      Taro.showToast({
        title: '活动已经结束！',
        icon: 'none',
        duration: 2000,
      })
      return
    }
  }
  onReachBottom() {
    const { pageNum, isMore, current } = this.state
    console.log(current)
    if (current === 1) {
      if (isMore) {
        this.setState(
          {
            pageNum: pageNum + 1,
          },
          () => {
            this.get_comment_list()
          },
        )
      } else {
        Taro.showToast({
          icon: 'none',
          title: '没有数据啦',
          mask: true,
        })
      }
    }
  }
  render() {
    const { system = '', isLike = false, detailData, current, comment } = this.state

    const tabList = [{ title: '课程简介' }, { title: '精彩评论' }]
    return (
      <View className='pagewrap' style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title={detailData.offlineTitle} showBack></CTopbar>
        </View>
        <View className='colleg'>
          {/* 课程图片 */}
          <View className='imageContainer'>
            <CImage src={detailData.offlineImg}></CImage>
          </View>
          {/* 课程介绍 */}
          <View className='padding25'>
            <View>
              <Text className='title'>{detailData.offlineTitle}</Text>
            </View>
            <View className='flexNum'>
              {/* <Text>共{detailData.courseNumber || 0}节课程</Text> */}
              <Text className='person'>已有{detailData.registrationNumber || 0}人报名课</Text>
            </View>
            <View className='row_text'>报名时间：{detailData.registrationTime}</View>
            <View className='row_text'>剩余座位：{detailData.limitNumber}</View>
            <View className='row_text'>
              报名状态：
              <Text
                className={detailData.registrationType === 2 ? 'finished' : detailData.registrationType === 1 ? 'sign_up' : 'not_started'}
              >
                {detailData.registrationType === 2 ? '已结束' : detailData.registrationType === 1 ? '进行中' : '未开始'}
              </Text>
            </View>
            <View className='row_text'>授课时间：{detailData.startTime}</View>
            <View className='row_text'>授课地址：{detailData.address}</View>
            <View className='flexPriceAndFollow'>
              {system.indexOf('iOS') < 0 ? (
                <View className='priceNum'>
                  {detailData.price ? (
                    <View>
                      <Text className='Sapplets'>￥</Text>
                      <Text>{String(detailData.price).split('.')[0]}</Text>
                      <Text>{String(detailData.price).split('.')[1]}</Text>
                    </View>
                  ) : (
                    <View className='priceNum'>免费</View>
                  )}
                </View>
              ) : (
                <View className='priceNum'>免费</View>
              )}

              {/* 切换喜欢 */}
              <View className='flex_1'>
                <View
                  className='like_wrapper'
                  onClick={() => {
                    this.toggleLick()
                  }}
                >
                  {isLike ? <Image src={like} /> : <Image src={dislike} />}

                  <Text className='likeStyle'>{isLike ? '已关注' : '关注'}</Text>
                </View>
              </View>
            </View>
          </View>

          {/* tag切换栏 */}

          <View className='tabsWsrap'>
            <AtTabs current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
              <AtTabsPane current={current} index={1}>
                <View className='introduction'>
                  <Text className='introductionTitle'>课程简介</Text>
                </View>
                {/* <Image src={detailData.offlineRemarks}></Image> */}
                <RichText className='richtext' nodes={detailData.offlineRemarks}></RichText>
              </AtTabsPane>
              <AtTabsPane current={current} index={2}>
                <View className='GreatComments'>
                  <Text className='GreatCommentsTitle'>精彩评论</Text>
                </View>
                {comment.map((c, i) => {
                  return (
                    <View className='commentItem' key={i}>
                      <View className='authorImg'>
                        <CImage src={c.avatarUrl} circle></CImage>
                      </View>
                      <View className='commentRight'>
                        <View className='commentTop'>
                          <Text className='nickName'>{c.nickName}</Text>
                          <Text className='commentDate'>{c.gmtCreate}</Text>
                        </View>
                        <View className='commentContent'>{c.comment}</View>
                      </View>
                    </View>
                  )
                })}
              </AtTabsPane>
            </AtTabs>
          </View>

          {/* 固定按钮 */}
          <View className='footerBtn' onClick={this.gotoPay.bind(this, detailData.price, detailData.registrationType)}>
            {system.indexOf('iOS') < 0 ? (
              detailData.price !== 0 ? (
                <Text className='footerBtnSpan'>{detailData.price > 0 ? '订阅￥' + detailData.price : '免费订阅'}</Text>
              ) : (
                <Text className='footerBtnSpan'>订阅</Text>
              )
            ) : (
              <Text className='footerBtnSpan'>免费观看</Text>
            )}
          </View>
        </View>
      </View>
    )
  }
}

export default OffLineCourseDetails
